import pinyin from 'pinyin'
import {getUrlParam} from '../data/util'
import URI from 'urijs'
import store from 'store'

let menus = store.get('menus'),
  menuToggle = store.get('menuToggle'),
  menuSelect = store.get('menuSelect')

console.log('menus====>>>>', menus)

console.log(menuSelect)

if (menuToggle) {
  _.each(menus, (item, index) => {
    item.active = menuToggle[index] === '1'
  })
}

window.menu = new Vue({
  el: '#menu',
  data: () => ({
    filterText: '',
    filterResults: [],
    select: menuSelect,
    menus: menus
  }),
  watch: {
    filterText: function (val) {
      val = $.trim(val).toLowerCase()

      if (!val.length) {
        this.filterResults = []
        return
      }

      this.filterResults = []

      for (let i = 0, iLen = this.menus.length; i < iLen; i++) {

        let subs = this.menus[i].children

        if (!(subs && subs.length)) {
          continue
        }

        for (let j = 0, jLen = subs.length; j < jLen; j++) {
          let start = subs[j].pinyin_short.indexOf(val),
            end = val.length

          if (start === -1) {
            start = subs[j].menuName.indexOf(val)
            end = val.length
          }

          if (start === -1) {
            start = subs[j].pinyin_full.indexOf(val)
            end = subs[j].length
          }

          if (start !== -1) {

            this.filterResults.push($.extend({}, subs[j]))

            // let text = this.filterResults[this.filterResults.length - 1].menuName

            // this.filterResults[this.filterResults.length - 1].menuName = text.substring(0, start) + text.substr(start, end) + text.substring(start + end)

          }
        }
      }

    }
  },
  // 生命周期
  beforeCreate: function () {
    if (this.select === undefined) {
      this.select = 0
    }
  },
  mounted: function () {
    this.transPinyin()
    this.scroller('#menu-nav')
  },
  updated: function () {
    if (this.filterText.length) {
      return
    }

    this.scroller('#menu-nav')
  },
  // 方法
  methods: {
    transPinyin: function () {
      for (let i = 0, iLen = this.menus.length; i < iLen; i++) {

        if (!(this.menus[i].children && this.menus[i].children.length)) {
          continue
        }

        for (let j = 0, jLen = this.menus[i].children.length; j < jLen; j++) {
          this.menus[i].children[j].pinyin_short = pinyin(this.menus[i].children[j].menuName, {style: pinyin.STYLE_FIRST_LETTER}).join('').toLowerCase()
          this.menus[i].children[j].pinyin_full = pinyin(this.menus[i].children[j].menuName, {style: pinyin.STYLE_NORMAL}).join('')
        }
      }

    },
    toggleMenu: function (e, menu) {
      e.preventDefault()

      menu.active = !menu.active

      let $el = $(e.target),
        $drop = $el.next('.menu-drop')

      if (menu.active) {
        $drop.slideDown(150)
      } else {
        $drop.slideUp(150)
      }
    },
    activeMenu: function (e, menu) {
      e.preventDefault()

      if (!menu.clientUrl || typeof menu.clientUrl !== 'string' || !menu.clientUrl.length || menu.clientUrl === '#') {
        layer.msg('暂无此功能', {
          icon: 5
        })

        return
      }

      this.select = menu.id

      let menuToggle = '',
        i = 0,
        len = this.menus.length

      for (; i < len; i++) {
        menuToggle += (this.menus[i].active ? '1' : '0')
      }

      const host = location.origin
      setTimeout(() => {
        location.href = host + `/${menu.clientUrl}`
        // window.location = new URI(window.location.href).pathname(menu.clientUrl).query({})
        // window.location = new URI(window.location.host) + `/${menu.clientUrl}`
      }, 300) // 300 transition的时间

    },
    scroller: function (el) {
      $(el).mCustomScrollbar({
        scrollInertia: 0,
        theme: 'dark-3',
        autoHideScrollbar: true,
        mouseWheel: {
          preventDefault: true
        },
        callbacks: {
          onScroll: function () {
            // 记录位置
            store.set('menuPosition', this.mcs.top)
          }
        }
      })

      // 返回到记录的状态
      $(el).mCustomScrollbar('scrollTo', store.get('menuPosition'))
    }
  }
})

$(window).on('unload', function () {
  let menuToggle = '',
    i = 0,
    len = menu.menus.length

  for (; i < len; i++) {
    menuToggle += (menu.menus[i].active ? '1' : '0')
  }

  store.set('menuSelect', String(menu.select))
  store.set('menuToggle', menuToggle)
})

$(window).on('click', '.navbar-toggle', function (e) {
  let $el = $(e.target)

  if (!$el.is('.navbar-toggle')) {
    $el = $el.parents('.navbar-toggle')
  }

  if ($el.hasClass('collapsed')) {
    $("#menu").show()
  } else {
    $("#menu").hide()
  }

})